<template>
  <div class="title">
    <div class="title-left title-text">
      Mod 汉化工具
    </div>

    <div class="title-right">
      <div class="title-sub animated fadeIn fast">首页</div>

      <div class="title-tool">
        <div class="box min" @click="minWindow()">
          <div class="icon">
            <svg
              t="1579241793060"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1742"
            >
              <path d="M128 448h768v128H128z" p-id="1743" fill="#fbfbf7"></path>
            </svg>
          </div>
        </div>
        <div class="box max" @click="maxWindow()">
          <div class="icon">
            <svg
              :style="{ display: isMax === false ? 'none' : 'unset' }"
              t="1579242216099"
              ref="max-min"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2374"
            >
              <path
                d="M959.72 0H294.216a63.96 63.96 0 0 0-63.96 63.96v127.92H64.28A63.96 63.96 0 0 0 0.32 255.84V959.4a63.96 63.96 0 0 0 63.96 63.96h703.56a63.96 63.96 0 0 0 63.96-63.96V792.465h127.92a63.96 63.96 0 0 0 63.96-63.96V63.96A63.96 63.96 0 0 0 959.72 0zM767.84 728.505V959.4H64.28V255.84h703.56z m189.322 0H831.8V255.84a63.96 63.96 0 0 0-63.96-63.96H294.216V63.96H959.72z"
                p-id="2375"
                fill="#fbfbf7"
              ></path>
            </svg>
            <svg
              :style="{ display: isMin === false ? 'none' : 'unset' }"
              t="1579242477758"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2862"
            >
              <path
                d="M204.8 256a51.2 51.2 0 0 0-51.2 51.2v409.6a51.2 51.2 0 0 0 51.2 51.2h614.4a51.2 51.2 0 0 0 51.2-51.2V307.2a51.2 51.2 0 0 0-51.2-51.2H204.8z m0-51.2h614.4a102.4 102.4 0 0 1 102.4 102.4v409.6a102.4 102.4 0 0 1-102.4 102.4H204.8a102.4 102.4 0 0 1-102.4-102.4V307.2a102.4 102.4 0 0 1 102.4-102.4z"
                p-id="2863"
                fill="#fbfbf7"
              ></path>
            </svg>
          </div>
        </div>
        <div class="box close" @click="closeWindow()">
          <div class="icon">
            <svg
              t="1579242531737"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3769"
            >
              <path
                d="M583.168 523.776L958.464 148.48c18.944-18.944 18.944-50.176 0-69.12l-2.048-2.048c-18.944-18.944-50.176-18.944-69.12 0L512 453.12 136.704 77.312c-18.944-18.944-50.176-18.944-69.12 0l-2.048 2.048c-19.456 18.944-19.456 50.176 0 69.12l375.296 375.296L65.536 899.072c-18.944 18.944-18.944 50.176 0 69.12l2.048 2.048c18.944 18.944 50.176 18.944 69.12 0L512 594.944 887.296 970.24c18.944 18.944 50.176 18.944 69.12 0l2.048-2.048c18.944-18.944 18.944-50.176 0-69.12L583.168 523.776z"
                p-id="3770"
                fill="#fbfbf7"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'title',
    props: {
      subTitle: {
        type: String,
        default: '',
      },
    },
    methods: {
      minWindow() {
        this.$root.electron.ipcSend('min');
      },
      maxWindow() {
        if (this.isMax === true) {
          this.isMax = false;
          this.isMin = true;
        } else {
          this.isMax = true;
          this.isMin = false;
        }
        this.$root.electron.ipcSend('max');
      },
      closeWindow() {
        this.$root.electron.ipcSend('close');
      },
    },
    mounted() {},
    data() {
      return {
        isMax: true,
        isMin: false,
        title: this.$root.store.currentViews,
      };
    },
  };
</script>

<style scoped>
  svg {
    width: 1em;
    height: 1em;
  }

  .title {
    /* background: #004d99; */
    display: flex;
    font-weight: 700;
    user-select: none;
    color: rgb(245, 245, 245);

    -webkit-app-region: drag;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
  }

  .title-left {
    /* background: #0065b8; */
    min-width: 190px;
  }

  .title-right {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    background: #1e1e20;
    box-sizing: border-box;
    border-bottom: 1px solid #484848;
  }

  .title-right:not(.title-tool) {
  }

  .title-text {
    padding: 10px 0;
    text-align: center;
    font-size: 1.2em;
    box-sizing: border-box;
  }

  .title-tool {
    display: flex;
    align-items: center;
    /* pointer-events: none; */
  }

  .title-sub {
  }

  .title-tool .box:not(:last-child) {
    margin-right: 20px;
  }

  .box {
    -webkit-app-region: no-drag;
    transition: all 0.3s;
    cursor: pointer;
  }

  .box:hover {
    transform: scale(1.1);
  }
</style>
